<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" style="left: 30px" @click="showaddbox()"
              >添加分类</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords" clearable>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getdata()"
            ></el-button>
          </el-col>
        </el-row>
        <transition name="el-zoom-in-center">
          <el-table
            :data="datalist"
            height="500"
            border
            style="width: 100%; margin-top: 15px"
            v-show="show"
          >
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="catename" label="分类名称"></el-table-column>
            <el-table-column prop="num" label="商品数量"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showeditbox(scope.row)"
                  >编辑信息</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="deletedata(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-card>
    </template>
    <!-- 添加框 -->
    <el-dialog
      title="提示"
      :visible.sync="addVisible"
      width="30%"
      @close="addDialogClosed"
    >
      <span>添加分类</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="newData"
          ref="addFormRef"
          :rules="addFormRules"
        >
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="newData.catename"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideaddbox()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分类编辑 -->
    <el-dialog title="提示" :visible.sync="editVisible" width="30%">
      <span>编辑{{ edit.nike }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="edit"
          ref="editFormRef"
          :rules="editFormRules"
        >
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="edit.catename"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideeditbox()">取 消</el-button>
        <el-button type="primary" @click="updatedata()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restVisible: false,
      oldcatename: "",
      show: false,
      editVisible: false,
      selectRoleId: "",
      searchwords: "",
      edit: {
        catename: "",
      },
      newData: {
        catename: "",
      },
      addVisible: false,
      datalist: [],
      addFormRules: {
        catename: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "分类名称长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      editFormRules: {
        catename: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "分类名称长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    hideaddbox() {
      this.addDialogClosed();
      this.addVisible = false;
    },
    hideeditbox() {
      this.editVisible = false;
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    searchdata() {
      if (this.searchwords === "") {
        this.$Message.error("请输入名称！");
        return;
      }
      this.$http
        .get("admingetcatebyname", {
          params: {
            token: window.sessionStorage.getItem("token"),
            words: this.searchwords,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$Message.success("查询成功！");
            this.datalist = res.data.data;
            this.searchwords = "";
          } else {
            this.$Message.error("查询失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    getdata() {
      this.$http
        .get("admingetcate", {
          params: { token: window.sessionStorage.getItem("token") },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.datalist = res.data.data;
          } else {
            this.$Message.error("获取数据失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统出错！" + err);
        });
    },
    showaddbox() {
      this.addVisible = true;
    },
    add() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        if (this.newData.pwd !== this.newData.twicepwd) {
          this.$Message.error("二次输入的密码不一致！");
          return;
        }
        let params = new URLSearchParams();
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("catename", this.newData.catename);
        this.$http
          .post("addcate", params)
          .then((res) => {
            if (res.data.code == 200) {
              this.$Message.success("添加成功！");
              this.addVisible = false;
              this.getdata();
            } else {
              this.$Message.error(res.data.msg);
            }
          })
          .catch((err) => {
            this.$Message.error("系统错误！" + err);
          });
      });
    },
    showeditbox(obj) {
      this.oldcatename = obj.catename;
      this.edit.catename = obj.catename;
      this.editVisible = true;
    },
    updatedata() {
      this.$confirm("此操作将重新编辑该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("token", window.sessionStorage.token);
          params.append("catename", this.oldcatename);
          params.append("newcatename", this.edit.catename);
          this.$http
            .post("updatecate", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("更新成功！");
                this.editVisible = false;
                this.getdata();
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
    deletedata(id) {
      this.$confirm("此操作将删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("id", id);
          params.append("token", window.sessionStorage.getItem("token"));
          this.$http
            .post("deletecate", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除成功！");
                this.getdata();
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
</style>
